<template>
  <div>
    <div class="upload_box">
      <div class="img_list">
        <div class="img_box" v-for="(item, index) in bannerLs" :key="index">
          <div
            class="closeimg el-icon-circle-close"
            @click="detailImg(index)"
          ></div>
          <div class="move_box">
            <span class="el-icon-back" v-if="index != 0"  @click="leftMove(index)"></span>
            <span class="el-icon-right" :style="index!=0?'margin-left: 20px':''" v-if="index + 1 != imgList.length"  @click="rigthtMove(index)"></span>
          </div>
          <div class="url_box">
            <el-input v-model="item.url" placeholder="请输入链接地址"></el-input>
          </div>
          <img :src="item.img" alt="" />
        </div>
        <el-upload
          class="avatar-uploader2"
          :action="action"
          :show-file-list="false"
          :on-success="listAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :multiple="true"
        >
          <i class="el-icon-plus" style="font-size: 28px"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "addActive",
  components: {},
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      action: process.env.VUE_APP_BASE_API + "/common/v1/uploadFile",
      limit: 5,
      imgList: [],
      input:'',
      bannerLs:[
      ],
    };
  },
  created() {},
  methods: {
    beforeAvatarUpload(file) {
      console.log("file", file);
      console.log("554648", this.limit, this.imgList);
      const format = ["image/jpeg", "image/jpg", "image/png"];
      const isJPG = format.some((item) => file.type === item);
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg,jpg,png格式!");
      }
      //   if (!isLt2M) {
      //     this.$message.error("上传头像图片大小不能超过 2MB!");
      //   }
      //   return isJPG && isLt2M;
      return isJPG;
    },
    listAvatarSuccess(res, file, fileList) {
      //图片上传
      this.imgList.push(res.result.url);
      // if (this.imgList.length > 5) {
      //   this.imgList.splice(4, this.imgList.length - 5);
      // }
      let list = this.imgList
      var ls = [];
      list.forEach(item=>{
        var obj = {}
        obj.url = ''
        obj.img = item
        ls.push(obj);
      })
      this.bannerLs = ls
      console.log(this.bannerLs)
      this.$emit("getImgLs", this.bannerLs);
    },
    onExceed(files, fileList) {
      console.log(this.limit, fileList);
      this.$message.error("最多上传5张图片");
    },
    detailImg(index) {
      //删除图片
      console.log(index);
      // this.imgList.splice(index, 1);
      this.bannerLs.splice(index, 1)
      this.$emit("getImgLs", this.bannerLs);
    },
    leftMove(index) {
      //左移
      if (index != 0) {
        // this.imgList[index] = this.imgList.splice(
        //   index - 1,
        //   1,
        //   this.imgList[index]
        // )[0];
        this.bannerLs[index] = this.bannerLs.splice(
          index - 1,
          1,
          this.bannerLs[index]
        )[0];
      } else {
        // this.imgList.push(this.imgList.shift());
        this.bannerLs.push(this.bannerLs.shift());
      }
      this.$emit("getImgLs", this.bannerLs);
    },
    rigthtMove(index) {
      //右移
      if (index != this.imgList.length - 1) {
        // this.imgList[index] = this.imgList.splice(
        //   index + 1,
        //   1,
        //   this.imgList[index]
        // )[0];
         this.bannerLs[index] = this.bannerLs.splice(
          index + 1,
          1,
          this.bannerLs[index]
        )[0];
      } else {
        // this.imgList.unshift(this.imgList.splice(index, 1)[0]);
        this.bannerLs.unshift(this.bannerLs.splice(index, 1)[0]);
      }
      this.$emit("getImgLs", this.bannerLs);
    },
  },
};
</script>
<style lang="scss" scoped>
.img_box {
  width: 228px;
  height: 128px;
  margin-right: 20px;
  margin-bottom: 110px;
  border-radius: 4px;
  position: relative;
}
.img_list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.img_list img {
  border-radius: 4px;
  width: 100%;
  height: 100%;
}
.img_list::v-deep .avatar-uploader2 .el-upload {
  width: 100% !important;
}
.closeimg {
  position: absolute;
  top: 0px;
  right: 0;
  z-index: 99;
  font-size: 28px;
  cursor: pointer;
  background: #4e4e4e;
  color: #ffffff;
}
.avatar-uploader2 {
  width: 228px;
  height: 128px;
  text-align: center;
  line-height: 128px;
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  margin-bottom: 110px;
}
.move_box {
  position: absolute;
  bottom: -30px;
  width: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.move_box span{
    cursor: pointer;
}
.move_box img {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.url_box{
  position: absolute;
  bottom: -80px;
  width: 100%;
  z-index: 99;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}
</style>